<script lang="ts" setup>
import { ref, watchEffect, onMounted, onUnmounted, toRefs } from 'vue'

import { getColWidth, setLastWidth } from '@/template/page/common/FormatData'
import { isDate, formatDate } from '@/utils/formatDate'

import eventBus from '@/libs/eventBus'
const props = defineProps({
  partParams: {
    type: Object
  },
  column: {
    type: Array
  },
  list: {
    type: Array
  }
})
const loading = ref(false) // 列表的加载中

const data = ref<any[]>([]) // 列表的数据
const col = ref<any[]>([]) // 列表的表头
const { column, list } = toRefs(props)
col.value = column?.value ?? []
data.value = list?.value ?? []

const selectShow = ref() //列表行多选框

const headList = ref<any[]>([])

const emit = defineEmits(['selection-change'])
/** 多选操作 */
const handleSelectionChange = (val: any) => {
  val.length && emit('selection-change', val, headList.value)
}

// 创建 ref 来引用容器元素
const boxRef = ref()
// 标记容器宽度是否发生变化
const isWidthChanged = ref(false)

const getBoxWidth = () => {
  return boxRef.value?.offsetWidth
}

//列表高度控制 将浏览器窗口的高度 - 系统Header和下部分高度
const height = window.innerHeight
const tableHeight = ref(height - 300)

// 创建 ResizeObserver 实例
let resizeObserver: any
onMounted(() => {
  // 创建 ResizeObserver 实例，传入回调函数
  resizeObserver = new ResizeObserver((entries) => {
    for (const entry of entries) {
      // 这里可以编写具体要执行的操作，例如更新状态、发送请求等
      // 这里简单地将 isWidthChanged 设置为 true 表示宽度已变化
      isWidthChanged.value = true
      console.log('容器宽度变化为:', entry.contentRect.width)
      if (entry.contentRect.width) {
        // 可以在这里添加更多操作，比如调用某个函数
        performSpecificOperation(entry.contentRect.width)
      }
    }
  })

  // 开始监听容器元素的尺寸变化
  if (boxRef.value) {
    resizeObserver.observe(boxRef.value)
  }
})

onUnmounted(() => {
  // 当组件卸载时，停止监听并清理资源
  if (resizeObserver && boxRef.value) {
    resizeObserver.unobserve(boxRef.value)
  }
})

// 定义一个具体的操作函数
const performSpecificOperation = (newWidth: any) => {
  console.log('执行了特定操作，新宽度为:', newWidth)
  render(newWidth)
  // 这里可以添加更多复杂的操作，如更新数据、调用 API 等
}

const render = (contentWidth?: number) => {
  let resultWidth = contentWidth ? contentWidth : getBoxWidth()
  //渲染表头
  if (col.value.length) {
    // column.value = JSON.parse(JSON.stringify(props.column))
    //含有selection则宽度 - 50
    if (selectShow.value) {
      resultWidth = resultWidth - 50
    }
    //当宽度之和等于百分比的时候 最后一列需要处理 解决小空隙问题
    const sumPercent = col.value.reduce((first: any, cur: any) => first + cur.width, 0)
    if (sumPercent > 100) {
      col.value = getColWidth(col.value, resultWidth)
    } else {
      col.value = getColWidth(col.value, resultWidth)
      setLastWidth(col.value, resultWidth)
    }
  }
}

watchEffect(() => {
  const { column, list } = toRefs(props)
  col.value = column?.value ?? []
  data.value = list?.value ?? []
  render()
})

const refreshList = (width: number) => {
  render(width)
}
eventBus.on('refreshList', refreshList)
</script>
<template>
  <div ref="boxRef">
    <el-table
      v-loading="loading"
      :data="data"
      stripe
      border
      style="width: 100%"
      :height="tableHeight"
      highlight-current-row
      :header-cell-style="{ background: '#eaf6fb' }"
      @selection-change="handleSelectionChange"
    >
      <el-table-column v-if="selectShow" align="center" type="selection" width="50" />
      <template v-for="item in col" :key="item.value">
        <el-table-column
          v-if="item.isShow == 'true'"
          align="center"
          :prop="item.value"
          :label="item.label"
          :width="item.width"
          show-overflow-tooltip
        >
          <template #default="scope">
            <template v-if="item.isEdit == 'false' && isDate(item.value)">
              <span>{{ formatDate(scope.row[item.value]) }}</span>
            </template>
            <template v-else>
              <!-- 处理下拉框或者输入框 -->
              <template v-if="item.isEdit == 'true'">
                <el-select
                  v-if="item.type == 'select'"
                  v-model="scope.row[item.value]"
                  filterable
                  clearable
                  placeholder="请选择"
                  style="width: 90%"
                >
                  <el-option
                    v-for="_ in item.cmbInfo"
                    :key="_.value"
                    :label="_.label"
                    :value="_.value"
                  />
                </el-select>
                <el-input
                  v-else-if="item.type == 'number'"
                  type="number"
                  v-model="scope.row[item.value]"
                  placeholder="请输入"
                  style="width: 90%"
                />
                <el-date-picker
                  v-else-if="item.type == 'date'"
                  type="date"
                  v-model="scope.row[item.value]"
                  placeholder="请选择"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  style="width: 90%"
                />
                <el-input
                  v-else
                  type="text"
                  v-model="scope.row[item.value]"
                  placeholder="请输入"
                  style="width: 90%"
                />
              </template>
              <template v-else>
                <span>{{ scope.row[item.value] }}</span>
              </template>
            </template>
          </template>
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>
